<template>
  <div>
    <!-- 详情页面 -->
    <div>
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <img :src="item.img_url" alt="" width="100%" />
        </van-swipe-item>
      </van-swipe>
      <!-- 30天无忧退货 -->
      <van-row class="row">
        <van-col span="8">
          <van-icon name="checked" color="#8b0000" />
          30天无忧退货</van-col
        >
        <van-col span="8">
          <van-icon name="checked" color="#8b0000" />
          48小时快速退费</van-col
        >
        <van-col span="8">
          <van-icon name="checked" color="#8b0000" />
          满88元免邮费
        </van-col>
      </van-row>
      <!-- 商品名 价格 -->
      <div id="box">
        <h1>{{ info.name }}</h1>
        <h3>{{ info.goods_brief }}</h3>
        <p>{{ info.retail_price | price }}</p>
      </div>
      <!-- 弹出层 -->
      <van-cell is-link @click="showPopup">展示弹出层</van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '35%' }">
        <div id="box2">
          <img :src="info.list_pic_url" alt="" width="100%" />
          <div>
            <h2>价格 : {{ info.retail_price | price }}</h2>
            <p>库存 : {{ info.goods_number }}</p>
          </div>
        </div>
        <h1>数量 :</h1>
        <van-stepper  v-model="value" min="1" :max="info.goods_number" />
        <van-goods-action>
          <van-goods-action-icon
            @click="onClickIcon"
            icon="star-o"
            text="未收藏"
            color="#ff5000"
            v-show="bool"
          />
          <van-goods-action-icon
            @click="onClickIcon"
            icon="star"
            text="已收藏"
            color="#ff5000"
            v-show="bool1"
          />
          <van-goods-action-icon
            to="/cart"
            icon="cart-o"
            text="购物车"
            :badge="num"
          />
          <van-goods-action-button
            @click="onaddButton"
            type="warning"
            text="加入购物车"
          />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </van-popup>
      <!-- 商品参数 -->
      <div id="goods">
        <h2>商品参数</h2>
        <ul>
          <li v-for="(item, index) in attribute" :key="index">
            <span>{{ item.name }}</span> :
            <strong>{{ item.value }}</strong>
          </li>
        </ul>
      </div>
      <div v-html="info.goods_desc"></div>
      <!-- 常见问题 -->
      <div id="wen">
        <h1>常见问题</h1>
        <div v-for="(item, index) in issue" :key="index">
          <h2>{{ item.question }}</h2>
          <p>{{ item.answer }}</p>
        </div>
      </div>
      <!-- 相关产品 -->
      <div class="chan">
        <h1>相关产品</h1>
        <ul>
          <li
            v-for="(item, index) in goodlist"
            :key="index"
            @click="change(item.id)"
          >
            <h2>
              <img :src="item.list_pic_url" alt="" width="100%" />
            </h2>
            <div>
              <h4>{{ item.name }}</h4>
              <p>{{ item.retail_price | price }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部栏 -->
    <van-goods-action>
      <van-goods-action-icon
        @click="onClickIcon"
        icon="star-o"
        text="未收藏"
        color="#ff5000"
        v-show="bool"
      />
      <van-goods-action-icon
        @click="onClickIcon"
        icon="star"
        text="已收藏"
        color="#ff5000"
        v-show="bool1"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="num"
        to="/cart"
      />
      <van-goods-action-button
        @click="onClickButton"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
//请求数据
import {
  GetGoodsDetail,
  GetGoodsrelated,
  Addcart,
  Getcartgood,
} from "../request/api.js";
export default {
  data() {
    return {
      bool: true,
      bool1: false,
      active: "",
      value: 1,
      show: false,
      banner: [],
      info: {},
      attribute: [],
      issue: [],
      goodlist: [],
      productList: [],
      num: 0,
      cartList: [],
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    //跳转其他详情页
    change(id) {
      this.$router.push({
        path: "/details",
        query: {
          id: id,
        },
      });
      //获取详细信息
      GetGoodsDetail({ id: this.$route.query.id })
        .then((res) => {
          // console.log(res.data.info);
          this.banner = res.data.gallery;
          this.info = res.data.info;
          this.attribute = res.data.attribute;
          this.issue = res.data.issue;
          document.documentElement.scrollTop = 0;
        })
        .catch((err) => {
          console.log(err);
        });
      //获取相关的数据
      GetGoodsrelated({ id: this.$route.query.id })
        .then((res) => {
          this.goodlist = res.data.goodsList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //收藏
    onClickIcon() {
      this.bool = !this.bool;
      this.bool1 = !this.bool1;
    },
    //进入购物车判断是否登录
    onClickButton() {
      let token = window.sessionStorage.getItem("token");
      if (token) {
        this.show = true;
      } else {
        this.$toast.loading({
          duration: 1000,
          message: "请先登录...",
          forbidClick: true,
        });
        this.$router.push("/user");
        
      }
    },
    //登录后 的加入购物车请求
    onaddButton() {
      // console.log(this.info.id);
      // console.log(this.value);
      // console.log(this.productList[0].id);
      Addcart({
        goodsId: this.info.id,
        productId: this.productList[0].id,
        number: this.value,
      })
        .then((res) => {
          this.$toast.success("添加成功");
          // console.log(res.data.cartList);
          this.cartList = res.data.cartList;
          // console.log(this.cartList);
          //判断那个是添加的商品是当前的商品
          for (let i = 0; i < this.cartList.length; i++) {
            // console.log(22);
            if (this.cartList[i].goods_id == this.info.id) {
              this.num = this.cartList[i].number;
            }
          }
        }) 
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    //获取详细信息
    GetGoodsDetail({ id: this.$route.query.id })
      .then((res) => {
        // console.log(res.data);
        this.banner = res.data.gallery;
        this.info = res.data.info;
        this.attribute = res.data.attribute;
        this.issue = res.data.issue;
        this.productList = res.data.productList;
      })
      .catch((err) => {
        console.log(err);
      });
    //获取相关的数据
    GetGoodsrelated({ id: this.$route.query.id })
      .then((res) => {
        this.goodlist = res.data.goodsList;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  //   过滤器
  filters: {
    price(val) {
      // 截取当前数据到小数点后两位
      let Val = parseFloat(val).toFixed(2);
      return "¥" + Val + "元";
    },
  },
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.row {
  font-size: small;
}
#box {
  background-color: #fff;
  line-height: 0.5rem;
  text-align: center;
  h1 {
    font-size: large;
  }
  h3 {
    color: #333333;
  }
  p {
    color: #8b0000;
  }
}
#box2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  img {
    width: 1.1rem;
    height: 1.1rem;
  }
  div {
    line-height: 0.5rem;
    width: 70%;
  }
}
h1 {
  font-size: large;
}
#goods {
  margin-top: 0.2rem;
  background-color: #fff;
  h2 {
    text-align: center;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: larger;
  }
  ul {
    margin: auto;
    width: 95%;
    li {
      width: 90%;
      background-color: #ccc;
      margin-bottom: 0.1rem;
      height: 0.25rem;
      line-height: 0.25rem;
      padding: 0 0.1rem;
      border-radius: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    span {
      color: #efefef;
      font-size: small;
    }
    strong {
      color: #333333;
      font-size: small;
      width: 80%;
    }
  }
}
img {
  width: 100%;
}
#wen {
  margin-top: 0.2rem;
  background-color: #fff;
  h1 {
    text-align: center;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: larger;
  }
  div {
    width: 93%;
    margin: auto;
  }
  h2 {
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: larger;
    color: #333333;
  }
  p {
    font-size: small;
    color: #666666;
  }
}
.chan {
  background-color: #fff;
  h1 {
    text-align: center;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: larger;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    li {
      width: 48%;
      div {
        text-align: center;
        line-height: 0.3rem;
        font-size: small;
        p {
          color: #8b0000;
        }
      }
    }
  }
}
</style>